import React, { useEffect, useState } from "react"
import { Breadcrumb, Form, Input, Button, Checkbox, DatePicker, Space, Select, Radio } from 'antd';
import { NavLink } from "react-router-dom";
import './addInterView.less'
import Editor from 'for-editor';
import stylesInterviewRecord from './addInterView.less'
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
import { getPostInterView } from "@/services";

const { Option } = Select;
const interRecord: React.FC = (props: any) => {
    let [date, setState] = useState()
    function dateFormat(fmt: any, date: any) {
        let ret;
        const opt = {
            'Y+': date.getFullYear().toString(), // 年
            'm+': (date.getMonth() + 1).toString(), // 月
            'd+': date.getDate().toString(), // 日
            'H+': date.getHours().toString(), // 时
            'M+': date.getMinutes().toString(), // 分
            'S+': date.getSeconds().toString() // 秒
            // 有其他格式化字符需求可以继续添加，必须转化成字符串
        };
        for (let k in opt) {
            ret = new RegExp('(' + k + ')').exec(fmt);
            if (ret) {
                fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, '0')))
            };
        };
        return fmt;
    }




    function onOk(value: any) {

        let curDate = dateFormat('YYYY-mm-dd HH:MM:SS', value._d)
        setState(curDate)
    }

    const onGenderChange = (value: string) => {

    };

    const onFinish = (values: any) => {
        console.log('Success:', values);
    };

    const onFinishFailed = (errorInfo: any) => {
        const { askAndanswerList, commitName, companyName, duration, intervierManagement, interviewId, interviewTime, issoundrecord, majorName, record, site, soundrecordList, stationName, status } = errorInfo.values
        const data = { askAndanswerList, commitName, companyName, duration, intervierManagement, interviewId, interviewTime: date, issoundrecord, majorName, record, site, soundrecordList, stationName, status }
        const path = '/sypt/interview'
        getPostInterView(path, data).then(ok => {
            if(ok.code==200){
                props.history.push('/student/interView/interviewManage')
            }
        })

    };



    return <div className={stylesInterviewRecord.postSkill}>
        <Breadcrumb style={{ padding: "16px", margin: "5px 0 0 22px", fontSize: "15px" }}>
            <Breadcrumb.Item>岗位</Breadcrumb.Item>
            <Breadcrumb.Item>面试记录管理</Breadcrumb.Item>
        </Breadcrumb>
        <div className={stylesInterviewRecord.interviewRecord}>
            <div>
                <b> 查看面试记录</b>
            </div>
            <div>
                <Form
                    name="basic"
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                >
                    <Form.Item
                        label="岗位名称"
                        name="stationName"
                        rules={[{ required: true }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="公司名称"
                        name="companyName"
                        rules={[{ required: true }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="面试时间"
                        name="interviewTime"
                        rules={[{ required: true }]}
                    >
                        <Space direction="vertical" size={12}>
                            <DatePicker showTime onOk={onOk} />

                        </Space>
                    </Form.Item>

                    <Form.Item
                        label="时长"
                        name="duration"
                        rules={[{ required: true }]}>
                        <Select
                            placeholder="Select a option and change input text above"
                            onChange={onGenderChange}
                            allowClear
                        >
                            <Option value="半小时">半小时</Option>
                            <Option value="半小时到一小时">半小时到一小时</Option>
                            <Option value="一小时以上">一小时以上</Option>
                        </Select>
                    </Form.Item>

                    <Form.Item
                        label="地点"
                        name="site"
                        rules={[{ required: true }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="面试官"
                        name="intervierManagement"
                        rules={[{ required: true }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="专业"
                        name="majorName"
                        rules={[{ required: true }]}
                    >
                        <Input defaultValue="北京网站" />
                    </Form.Item>

                    <Form.Item
                        label="提交人"
                        name="commitName"
                        rules={[{ required: true }]}
                    >
                        <Input defaultValue="黄辉" />
                    </Form.Item>

                    <div>
                        <Form.Item
                            label="记录——吐槽"
                            name="record"
                            rules={[{ required: true }]}
                        >
                            <Editor style={{ width: "800px", height: "300px" }} />
                        </Form.Item>

                        <Form.Item
                            label="面试结果"
                            name="status"
                            rules={[{ required: true }]}
                        >
                            <Radio.Group>
                                <Radio value={0}>不确定</Radio>
                                <Radio value={1}>通过</Radio>
                                <Radio value={2}>未通过</Radio>
                            </Radio.Group>
                        </Form.Item>

                        <Form.Item
                            label="录音文件"
                            name="issoundrecord"
                            rules={[{ required: true }]}
                        >
                            <Radio.Group>
                                <Radio value={0}>无</Radio>
                                <Radio value={1}>有</Radio>
                            </Radio.Group>
                        </Form.Item>

                        <Form.List name="askAndanswerList">
                            {(fields, { add, remove }) => (
                                <>
                                    {fields.map(({ key, name, fieldKey, ...restField }) => (
                                        <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                                            <Form.Item
                                                label="问"
                                                {...restField}
                                                name={[name, 'first']}
                                                fieldKey={[fieldKey, 'first']}
                                                rules={[{ required: true, message: 'Missing first name' }]}
                                            >
                                                <Input placeholder="First Name" />
                                            </Form.Item>
                                            <Form.Item
                                                label="答"
                                                {...restField}
                                                name={[name, 'last']}
                                                fieldKey={[fieldKey, 'last']}
                                                rules={[{ required: true, message: 'Missing last name' }]}
                                            >
                                                <Input placeholder="Last Name" />
                                            </Form.Item>
                                            <MinusCircleOutlined onClick={() => remove(name)} />
                                        </Space>
                                    ))}
                                    <Form.Item>
                                        <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                                            添加问题
                                        </Button>
                                    </Form.Item>
                                </>
                            )}
                        </Form.List>

                        <Form.Item >
                            <NavLink to='/student/interView/interviewManage'> <Button>返回</Button></NavLink>
                            <Button type="primary" htmlType="submit">
                                保存
                            </Button>
                        </Form.Item>
                    </div>
                </Form>
            </div>

        </div>
    </div>
}
export default interRecord

